<template>
  <div class="pages cash">
    <div class="pageLevel">
      <!-- 头部 -->
      <div class="content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item>
            <el-button type="primary" @click="goBack()"> 返回</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" style="margin-left:50px;">确定</el-button>
          </el-form-item>
          <div class="box1">提现至{{message.bankName}} ( {{message.bankCardNumbers}} ),可提现金额{{message.amtUseamt}}元</div>
          <el-form-item label="提现金额" prop="name">
            <input class="commonInput" v-model="value"  @blur="blur(value)" size="mini" type="text">
            <!-- <el-input v-model="ruleForm.value" maxlength="8" style="width:30%;"></el-input> -->
            <span style="color:#606266;font-size:14px;margin-left:10px;">元</span>
            <div class="span2">最小提现金额为1元，提现金额≤5万元时，手续费为1元/笔，当提现金额＞5万元时，手续费为2元/笔。</div>
          </el-form-item>
          <el-form-item label="" prop="name">
            <span style="color: #606266;">温馨提示: T+1日到账</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import util from '@/util'
// import { validateOperatingArea } from "@/rule";
import { withdrawalApplication, getAccountInfo } from "@/api";
export default {
  computed: mapState([
    "merchantId",
  ]),
  data() {
     const twoDecimal  = (rule, value, callback) => {
        if(!util.twoDecimal(value)) {
          return callback(new Error('数字,保留2位小数，请重新输入'));
        }  else {
          callback();
        }
      };
    return {
      Tips: "",
      message: {},
      value: this.val,
      aaa: 999,
      ruleForm: {
        name: "111"
      },
      rules: {
        name: [
          { required: true, message: "请输入提现金额", trigger: "blur" },
           { validator: twoDecimal, trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    val: function(val) {
      this.value = val;
    },
    value: function(val) {
      val = val.toString();
      let arr = val.split(".");
      let num = "";
      arr[0] = arr[0].replace(/[^0-9]/gi, "").substring(0, 8); // 去掉非数字&&保留8位
      if (arr[0] == "") {
        arr[0] = 0;
      }
      arr[0] = parseInt(arr[0]);
      if (arr.length > 1) {
        num = ".";
        num += arr[1].replace(/[^0-9]/gi, "").substring(0, 2);
      }
      if (arr[0] > this.message.amtUseamt) {
        arr[0] = this.message.amtUseamt;
      }
      this.value = arr[0] + num;
      this.$emit("update:val", this.value);
    },
    deep: true
  },
  mounted() {
    this.getAccountInfo(); //账号信息
  },
  methods: {
    routerPush(name, showTab) {
          util.routerTo(name,{
              showTab: showTab,
          })
    },
    verification() {
      if (this.message.amtUseamt > 50000) {
        let message = this.message.amtUseamt - 2;
        this.Tips =
          "账户金额不足以支付提现手续费2.00元，当前最大可提现金额为¥" +
          message.toFixed(2);
      }
      if (this.message.amtUseamt <= 50000) {
        let message = this.message.amtUseamt - 1;
        this.Tips =
          "账户金额不足以支付提现手续费1.00元，当前最大可提现金额为¥" +
          message.toFixed(2);
      }
      this.$confirm(this.Tips, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.withdrawalApplication();
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: ""
          // });
        });
    },
    getAccountInfo() {
      let data = {
        orgId: this.merchantId
      };
      getAccountInfo(data).then(res => {
        this.message = res.data;
        this.message.bankCardNumber.toString();
        let a = this.message.bankCardNumber;
        let b = this.message.bankCardNumber.length;
        this.message.bankCardNumbers = a.substr(b - 4);
      });
    },
    withdrawalApplication() {
      let data = {
        orgId: this.merchantId,
        amtAclamt: this.value,
        amtUseamt: this.message.amtUseamt,
        state: "1"
      };
      withdrawalApplication(data).then(res => {
        this.$store.commit("SETISRELOADDATA", true);
             util.routerTo("/financial-center/account-center/finance-account")
      });
    },
    blur(val) {
      if (val.substr(val.length - 1, 1) == ".") {
        this.value = this.value.substr(0, this.value.length - 1);
      }
    },
    goBack() {
      history.back();
    },
    submitForm(formName) {
      if (this.value == undefined) {
        this.$message({
          message: "请输入提款金额",
          duration: "3000"
        });
      } else if (this.value < 1) {
        this.$message({
          message: "最小提现金额为1元",
          duration: "3000"
        });
      } else {
        if (
          this.message.amtUseamt > 50000 &&
          this.value + 2 > this.message.amtUseamt
        ) {
          this.verification();
        }
        if (
          this.message.amtUseamt <= 50000 &&
          this.value + 1 > this.message.amtUseamt
        ) {
          this.verification();
        } else {
          this.withdrawalApplication();
        }
      }
    }
  }
};
</script>
<style scoped>
.content {
  width: 800px;
  margin: 20px 0 0 30px;
}
.content .box1 {
  color: #606266;
  font-size: 16px;
  margin: 50px 0 30px 30px;
}
.content .span2 {
  position: absolute;
  left: 250px;
  top: 0px;
  color: #c0c4cc;
  width: 655px;
}
.commonInput {
  height: 27px;
  width: 210px;
}
</style>

